<template>
  <h1>EL-开关组件</h1>
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: pink; --el-switch-off-color: #bf82c3"
  />

  是否为管理员<el-switch v-model="isAdmin"></el-switch>
  是否显示图片<el-switch v-model="isShow"></el-switch>
  <hr>
  <img src="fcq.jpg" width="200" v-if="isShow">
  <hr>
<!-- :active-value="1"开关打开 :inactive-value="0"开关关闭 -->
  <el-switch :active-value="1" :inactive-value="0" v-model="num"></el-switch>
<!-- :active-value="'1'"开关打开 :inactive-value="'0'"开关关闭 -->
  <el-switch :active-value="'1'" :inactive-value="'0'" v-model="numStr"></el-switch>

</template>

<script setup>
import { ref } from 'vue'

const value1 = ref(false);
const value2 = ref(false);

const isAdmin = ref(true);
const isShow = ref(true);

const num =ref(1);
const numStr =ref('1');

</script>
